<template>
  <!-- 刷新业务，边框线，背景 -->
  <div class="review-page">
    <!-- 项目基本信息部分 -->
    <div class="project-info">
      <!-- 面包屑 -->
      <h2>
        <span>计算与规划成果审查与管理 / 成功审查</span>
        / 甘孜祥和汽车制造厂
      </h2>
      <div class="line"></div>
      <div class="project-info-header">项目基本信息</div>
      <div class="project-info-body">
        <div class="info-item1">
          <span class="name">项目名称</span>
          <span class="specific-name">
            {{ projectInfo.projectName }}
            <span class="time">
              {{ projectInfo.projectTime }}
            </span>
          </span>
        </div>
        <div class="info-item2">
          <div class="info-item">
            <span class="name">地域</span>
            <span>{{ projectInfo.area }}</span>
          </div>
          <div class="info-item">
            <span class="name">项目编号</span>
            <span>{{ projectInfo.projectNumber }}</span>
          </div>
          <div class="info-item">
            <span class="name">负责人</span>
            <span>{{ projectInfo.leader }}</span>
          </div>
          <div class="info-item">
            <span class="name">类型</span>
            <span>{{ projectInfo.type }}</span>
          </div>
        </div>
      </div>
      <div class="operation-buttons">
        <div class="pack">
          <el-button type="success">通过</el-button>
        </div>
        <div class="pack2">
          <el-button type="danger">打印</el-button>
        </div>
      </div>
    </div>
    <!-- 计算与成果部分 -->
    <div class="calculation-results">
      <div class="calculation-result">
        <div class="result">计算与成果</div>
      </div>
      <div class="eltable">
        <el-table
          :data="filteredCalculationData"
          style="width: 100%"
          :row-style="{ height: '53px' }"
        >
          <!-- <el-table-column
            type="selection"
            class="custom-cell"
            width="40"
            size="small"
          ></el-table-column> -->
          <el-table-column
            prop="index"
            label="指标"
            width="260"
            align="center"
          />
          <el-table-column
            prop="unit"
            label="单位"
            width="150"
            align="center"
          />
          <el-table-column
            prop="constraint"
            label="指标属性"
            width="150"
            align="center"
          />
          <el-table-column
            prop="uploadedValue"
            label="已上传指数"
            width="160"
          />
          <el-table-column
            prop="systemEvaluation"
            label="系统发展评估"
            align="center"
            width="160"
          />
          <el-table-column
            prop="standardRatio"
            label="标准指数比"
            align="center"
          />
          <el-table-column
            prop="indexCategory"
            label="指标分类"
            align="center"
          />
          <el-table-column
            prop="systemResult"
            label="系统评估"
            align="center"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// 模拟项目基本信息数据
const projectInfo = ref({
  projectName: '甘孜祥和汽车制造厂',
  projectTime: '2023.2.15 - 2045.2.15',
  area: '四川甘孜祥和路34号',
  projectNumber: '2349905053153',
  leader: '陈昭 13520542258',
  type: '制造工业开垦',
})

// 模拟计算与成果数据
const calculationData = ref([
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  {
    index: '预计月度废水排放总量',
    unit: '万吨',
    constraint: '约束性',
    uploadedValue: '6547.56',
    systemEvaluation: '7',
    standardRatio: '较高',
    indexCategory: '绿色',
    systemResult: '不通过',
  },
  {
    index: '城乡建设用地规模',
    unit: '平方千米',
    constraint: '约束性',
    uploadedValue: '3235.346',
    systemEvaluation: '3',
    standardRatio: '较低',
    indexCategory: '协调',
    systemResult: '通过',
  },
  // 其他数据项...
])

const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(12)
// const pageSizes = reactive([12, 13, 20])
// const totalItems = ref(calculationData.value.length)
// 计算过滤后的数据
const filteredCalculationData = computed(() => {
  if (!searchText.value) {
    return calculationData.value.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value,
    )
  }
  return calculationData.value.filter((item) =>
    Object.values(item).some((value) =>
      String(value).includes(searchText.value),
    ),
  )
})

// const search = () => {
//   currentPage.value = 1
// }

// const handleCurrentChange = (page: number) => {
//   currentPage.value = page
// }

// const handleSizeChange = (size: number) => {
//   pageSize.value = size
// }
</script>

<style scoped lang="scss">
$bg-color: #1e2d44;
$border-color: #33445c;
$text-color: white;
.custom-pagination-container {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 18px;
  justify-content: right;
  margin-top: 10px;
}
::v-deep .el-pagination__jump {
  color: #ffffff; /* 修改文字颜色 */
  font-size: 14px;
  width: 96px;
  border-radius: 0;
}
/* 总条数文字 */
::v-deep .el-pagination__total {
  color: #ffffff;
  font-size: 12px;
}
::v-deep .el-input__wrapper {
  background-color: #1479b4;
}
::v-deep input#el-id-6943-5 {
  color: rgb(98, 157, 17);
}
::v-deep .el-input__inner[type='number'] {
  color: white;
}
/* 每页选择器下拉框 */
::v-deep .el-select .el-input__inner {
  padding: 0 8px;
  margin-left: 10px;
}
::v-deep .custom-sizes .el-select-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

::v-deep .el-select {
  width: 100px;
  background-color: aqua !important;
  color: aliceblue;
}
::v-deep .el-select .el-input__inner {
  background-color: blue !important;
  color: aliceblue;
}
::v-deep .el-select__wrapper {
  background-color: #1479b4;
  color: white;
  box-shadow: 0 0 0 1px #082466 inset;
  padding: 2px 10px;
}

::v-deep .el-select__placeholder {
  color: #e1e5eb;
}
::v-deep .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #0681dd;
}
::v-deep .custom-pagination-container {
  // margin-top: 50px;
  // border: #0c628f 9px solid;
  border-bottom: none;
  background-color: #042348;
}
button.el-button.el-button--success.el-button--small.success {
  color: white;
}
button.el-button.el-button--danger.el-button--small.danger {
  color: white;
}
/* 输入框样式 */
/* 左侧文字样式 */
.prefix-text {
  margin-right: 4px;
  font-weight: 500;
}

/* 深度样式覆盖 */
:deep(.transparent-pagination) {
  font-size: 16px;
  color: white !important;
  .el-pagination__total {
    order: 6;
    margin-left: 12px !important;
    // color: #909399;
    color: white;
  }

  .el-pagination__sizes {
    order: 1;
    margin-right: 16px;

    .el-input__inner {
      width: 1px !important;
      height: 28px !important;
      border-color: #dcdfe6;
    }
  }

  .btn-prev,
  .btn-next {
    // width: 28px;
    // height: 28px;
    width: 36px !important; /* 放大尺寸 */
    height: 36px !important;
    font-size: 20px !important;
    background: transparent !important;
    // border: 1px solid #dcdfe6;
    // border-radius: 4px;
    color: #ffffff;
    &:hover {
      color: #409eff;
      border-color: #409eff;
    }
  }
  :deep(.btn-prev) {
    font-size: 20px !important;
  }
  .el-pager {
    li {
      min-width: 28px;
      height: 28px;
      background: transparent;
      // border: 1px solid #dcdfe6;
      border-radius: 4px;
      margin: 0 4px;
      font-weight: normal;
      // color: red;
      color: white;
      // background: red;
    }
  }

  .el-pagination__jump {
    margin-left: 12px;

    .el-input__inner {
      width: 3px !important;
      height: 28px !important;
      // background-color:;
    }
  }
}

::v-deep .pack button.el-button.el-button--success {
  // background-color:rgb(114, 179, 114);
  border: 2px solid #347dcd;
  width: 120px;
  margin-top: -10px !important;
  &:hover {
    background-color: #264e77;
  }
}
::v-deep .pack2 button.el-button.el-button--danger {
  // background-color:rgb(238, 27, 27);
  border: 2px solid #347dcd;
  width: 120px;
  &:hover {
    background-color: #264e77;
  }

  background-color: rgb(114, 179, 114);
  width: 80px;
  margin-top: -10px !important;
}
::v-deep .pack2 button.el-button.el-button--danger {
  background-color: rgb(238, 27, 27);
  width: 80px;
}
.pack {
  margin-bottom: 3px;
}
::v-deep .el-pagination .btn-prev .el-icon,
::v-deep .el-pagination .btn-next .el-icon {
  font-size: 20px !important; /* 调整图标大小 */
  color: #ffffff; /* 修改箭头颜色 */
}
/* 自定义总数样式 */
.custom-total {
  color: #909399;
  font-weight: normal;
}
.review-page {
  // background-color: $bg-color;
  background-color: #072658 !important;
  height: 100%;
  color: $text-color;
  padding: 20px;
  h2 {
    font-size: 26px;
    span {
      color: #738593 !important;
    }
  }

  .project-info {
    .project-info-header {
      display: flex;
      align-items: center;
      background: linear-gradient(to right, #11377a, #0c2f66);
      color: white;
      border-top: #153b7e 4px solid;
      border-bottom: #153b7e 4px solid;
      padding: 11px 20px;
      font-size: 14px;
      font-weight: bold;
      span {
        font-size: 14px;
        color: #c4c4c4;
        font-weight: normal;
        transform: translateY(5px);
      }
    }
    .project-info-body {
      background: linear-gradient(to right, #082659, #126098);
      color: #dbdbdb;
      overflow: hidden;
      position: relative;
    }

    .info-item1 {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      margin-top: 10px;
      // width: 1000px;
      // height: 100px;
      .name {
        font-size: 15px;
      }
      .specific-name {
        font-size: 20px;
        // padding-top: ;
        height: 40px;
        // line-height: 40px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        // justify-content: center;
        text-align: center;
        background: linear-gradient(to left, #0c2f60, #174786);
        .time {
          font-size: 14px;
          margin-left: 50px;
        }
      }

      span {
        margin-right: 10px;
      }
    }
    .info-item2 {
      display: flex;
      .info-item {
        display: flex;
        align-items: center;
        margin-right: 100px;
        .name {
          font-size: 15px;
          margin-right: 38px;
        }
      }
    }

    .operation-buttons {
      margin-top: 10px;
      position: absolute;
      right: 350px;
      top: 250px;
    }
  }

  .calculation-results {
    display: flex;
    flex-direction: column;

    .calculation-result {
      display: flex;
      justify-content: space-between;
      background: linear-gradient(to right, #11377a, #072658);
      // background-color: red;
      color: white;
      border-top: #153b7e 4px solid;
      border-bottom: #153b7e 4px solid;
      padding: 5px 20px;
      margin-top: 20px;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
      // vertical-align: baseline;
      .result {
        margin-top: 5px;
        :deep(.size) {
          font-size: 14px;
          color: #c4c4c4;
          font-weight: normal;
          transform: translateY(5px) !important;
        }
      }
      .search-bar {
        display: flex;
        text-align: center;
        height: 30px;
        .el-button {
          width: 140px;
          background-color: #266a97;
          margin-left: 10px;
          font-size: 16px;
          height: 30px;
        }
        :deep(.el-button:hover) {
          color: white; /* 将颜色改为绿色 */
          background-color: #195e8c;
          border-radius: 0 !important;
        }
      }
    }
    :deep(.el-table) {
      border: none !important;
      color: #96b7c6;
      text-align: center;

      align-items: center;
      .el-table__header {
        th {
          background-color: #082659 !important;
          border: none !important;
        }
      }
    }
    ::v-deep .el-table__body {
      background-color: #fff5ee !important; /* 主体颜色（示例：浅橙色） */
    }
    ::v-deep .el-pagination .el-select {
      width: 60px;
      background-color: #072658 !important;
    }
    ::v-deep .el-pagination .el-select .el-input__inner {
      background-color: #072658 !important;
    }
    //   .search-bar {
    //     display: flex;
    //     align-items: center;
    //     margin-bottom: 10px;

    //     el-input {
    //       flex: 1;
    //       margin-right: 10px;
    //       background-color: transparent;
    //       border: 1px solid $border-color;
    //       color: $text-color;

    //       &::placeholder {
    //         color: rgba($text-color, 0.6);
    //       }
    //     }

    //     el-button {
    //       background-color: transparent;
    //       border: 1px solid $border-color;
    //       color: $text-color;

    //       &:hover {
    //         background-color: rgba($text-color, 0.1);
    //       }
    //     }
    //   }

    //   el-table {
    //     border: 1px solid $border-color;
    //     background-color: transparent;

    //     th,
    //     td {
    //       border-right: 1px solid $border-color;
    //       border-bottom: 1px solid $border-color;
    //       text-align: center;
    //       color: $text-color;
    //     }

    //     th {
    //       background-color: rgba($text-color, 0.1);
    //     }

    //     .el-table__expand-icon {
    //       color: $text-color;

    //       &:hover {
    //         cursor: pointer;
    //       }
    //     }
    //   }

    //   el-pagination {
    //     margin-top: 10px;
    //     text-align: center;

    //     .el-pagination__btn,
    //     .el-pagination__sizes,
    //     .el-pagination__jump {
    //       background-color: transparent;
    //       border: 1px solid $border-color;
    //       color: $text-color;

    //       &:hover {
    //         background-color: rgba($text-color, 0.1);
    //       }
    //     }
    //   }
    // }
  }
  ::v-deep .el-table tr {
    background-color: #0a3068 !important;
    border: none !important;
    td {
      border: none !important;
    }
    &:hover > td {
      background-color: #072658;
    }
  }
  .success {
    background-color: #246b95;
    width: 60px;
  }
  .danger {
    background-color: #a53b4a;
    width: 60px;
  }
}
</style>
